<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page异步</title>
</head>
	<script type="text/javascript" src="${pageContext.request.contextPath }/statics/js/jquery-3.5.1.js"></script>
	<script type="text/javascript">
		//$(document).ready(function(){});
		$(function (){
			aaa(1);
		});

		function pageChange(xxx){
			aaa(xxx);
		}
		
		function aaa(ggg){
			$.ajax({
				type:"post",
				data:{
					"currentPage":ggg,
					"pageSize":12
				},
				url:"${pageContext.request.contextPath}/page3.do",
				success:function(data){
				//	alert(data.lists);
					var content="";
					$.each(data.lists,function(i,n){
						content+="<tr><td>"+(((data.currentPage-1)*data.pageSize)+i+1)+"</td><td>"+n.username+"</td><td>"+n.password+"</td><td>"+
							n.permissions+"</td></tr>";
					});
					$("#t").html(content);



					
					var content2='';
					if(data.currentPage==1){
						content2+='<a href="#">上一页</a>';
					}else{
						content2+='<a href="#" onclick="pageChange('+(data.currentPage-1)+')">上一页</a>';
					}

					for(var i=1;i<=data.pages;i++){
						content2+='<a href="#" onclick="pageChange('+i+')">'+i+'</a>'
					}
					
					if(data.currentPage==data.pages){
						content2+='<a href="#">下一页</a>';
					}else{
						content2+='<a href="#" onclick="pageChange('+(data.currentPage+1)+')">下一页</a>';
					}
					$("#d").html(content2);
				}
			});
		}
		
	</script>
<body>
	<table>
		<tr><th>id</th><th>用户名</th><th>密码</th><th>权限</th></tr>
	</table>
	<table id="t"></table>
	<div id="d"></div>
</body>
</html>